<!--
 * hi-price - 价格
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-price" :class="_classes" :style="_styles" @tap="_emits('click')">
        <!-- 单位 -->
        <text class="hi-price__unit" v-if="unit">{{ unit }}</text>

        <!-- 值 -->
        <text class="hi-price__value">{{ fmtPrice }}</text>
    </view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { computed } from "vue";
    import props from "./props.js";
    import { floatFormat, numberFormatAmount } from "../../functions";

    // 组件属性
    const _props = defineProps(props);

    // 组件事件
    const _emits = defineEmits(["click"]);

    // 组件类名
    const _classes = computed(() => {
        const classes = [];

        // 主题
        if (_props.theme) classes.push(`hi-price--theme hi-price--theme--${_props.theme}`);

        // 删除线
        if (_props.line) classes.push("hi-price--line");

        return classes;
    });

    // 组件样式
    const _styles = computed(() => {
        const styles = [];

        // 主题
        if (_props.theme) styles.push(`--hi-price-theme: var(--hi-theme-${_props.theme})`);

        // 间距
        if (_props.gap) styles.push(`--hi-price-gap: ${_props.gap}`);

        // 对齐方式
        if (_props.align) styles.push(`--hi-price-vertical-align: ${_props.align}`);

        // 颜色
        if (_props.color) styles.push(`--hi-price-color: ${_props.color}`);

        // 大小
        if (_props.fontSize) styles.push(`--hi-price-font-size: ${_props.fontSize}`);

        // 粗细
        if (_props.fontWeight) styles.push(`--hi-price-font-weight: ${_props.fontWeight}`);

        // 单位大小
        if (_props.unitSize) styles.push(`--hi-price-unit-font-size: ${_props.unitSize}`);

        // 单位颜色
        if (_props.unitColor) styles.push(`--hi-price-unit-color: ${_props.unitColor}`);

        // 单位粗细
        if (_props.unitFontWeight) styles.push(`--hi-price-unit-font-weight: ${_props.unitFontWeight}`);

        // 删除线颜色
        if (_props.lineColor) styles.push(`--hi-price-delete-line-color: ${_props.lineColor}`);

        // 删除线粗细
        if (_props.lineHeight) styles.push(`--hi-price-delete-line-height: ${_props.lineHeight}`);

        return styles;
    });

    // 格式化
    const fmtPrice = computed(() => {
        // 格式化
        let price = floatFormat(_props.value, _props.decimals, !_props.fixed);

        // 增加千位符
        return numberFormatAmount(price, _props.thousands);
    });

    // 组件对外暴漏的属性或方法
    defineExpose({});
</script>

<style lang="scss" scoped>
    .hi-price {
        display: var(--hi-price-display, inline-block);
        color: var(--hi-price-color, var(--hi-price-theme, inherit));
        font-size: var(--hi-price-font-size, inherit);
        font-weight: var(--hi-price-font-weight, 700);
        position: var(--hi-price-position, relative);
        line-height: var(--hi-price-line-height, 1);

        &__unit {
            display: var(--hi-price-unit-display, inline-block);
            color: var(--hi-price-unit-color, inherit);
            font-size: var(--hi-price-unit-font-size, 0.8em);
            font-weight: var(--hi-price-unit-font-weight, inherit);
            margin: var(--hi-price-unit-margin, 0 2px 0 0 );
            vertical-align: var(--hi-price-vertical-align, bottom);
        }

        &__value {
            display: var(--hi-price-value-display, inline-block);
            vertical-align: var(--hi-price-vertical-align, bottom);
        }

        &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: var(--hi-price-delete-line-height, 2px);
            background: var(--hi-price-delete-line-color, currentColor);
            left: var(--hi-price-delete-line-left, 50%);
            top: var(--hi-price-delete-line-top, 50%);
            transform: var(--hi-price-delete-line-transform, translate(-50%, -50%));
            z-index: 2;
            opacity: var(--hi-price-delete-line-opacity, 0);
        }

        &--line {
            &::before {
                opacity: var(--hi-price-delete-line-opacity, 1);
            }
        }
    }
</style>
